<script setup lang='ts' name="tabs-item">
import { ElTabPane, ElTabs } from 'element-plus'
import { nextTick, ref } from 'vue'

const props = defineProps<{
    data: string[]
}>()
const emits = defineEmits(['handleClick'])
const { data } = props
const activeName = ref(0)

async function handleClick() {
    await nextTick()
    emits('handleClick', activeName.value)
}
</script>

<template>
    <ElTabs v-model="activeName"
            class="tabs_item"
            @tab-click="handleClick"
    >
        <ElTabPane v-for="(tab, idx) in data"
                   :key="idx"
                   :label="tab"
                   :name="idx"
        />

        <slot />
    </ElTabs>
</template>

<style lang="scss" scoped>
.tabs_item {
    :deep(.el-tabs__nav-wrap::after) {
        display: none;
    }
}
</style>
